<template>
  <div style="margin-top: 10px">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="search-card-title">Role Create</span>
        </div>
      </template>
      <el-form
        :inline="true"
        :model="createNew"
        class="demo-form-inline"
        ref="createNew"
      >
        <el-row>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item label="Role:" prop="role">
            <el-input
              style="width: 240px"
              v-model="createNew.role"
              placeholder="please inpute role"
            ></el-input>
          </el-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item
            label="Authority:"
            prop="authority"
            v-if="createNew.role != ''"
          >
            <el-select
              v-model="createNew.authority"
              multiple
              placeholder="请选择"
              style="width: 1165px"
            >
              <el-option
                v-for="item in data"
                :key="item.id"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col
            :span="6"
            :offset="18"
            style="text-align: end; padding-right: 10px"
          >
            <el-button type="primary" size="mini" @click="addForm(createNew)"
              >ADD</el-button
            >
            <el-button type="info" size="mini" @click="resetForm('createNew')"
              >RESET</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <br />
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="search-card-title">Role Management</span>
        </div>
      </template>
      <el-row>
        <el-col :span="10" class="tableManagement">
          <span>
            <el-descriptions title="Authority List" border :column="1">
              <el-descriptions-item
                label="权限名称"
                :labelStyle="{ background: '#e1f3d8' }"
                :contentStyle="{ background: '#FDE2E2' }"
              >
                权限后缀地址
              </el-descriptions-item>
              <el-descriptions-item
                :label="item.number + '、' + item.value"
                v-for="item in authority"
                :key="item.number"
              >
                {{ item.description }}
              </el-descriptions-item>
            </el-descriptions>
          </span></el-col
        >
        <el-col :span="13" class="tableManagement">
          <div style="font-size: 16px; font-weight: 550">
            Authority Management
          </div>
          <div>
            <br />
            <el-card class="authority">
              <div style="font-size: 16px; font-weight: 550">
                User Authority:
              </div>
              <br />
              <span v-for="tag in tags" :key="tag.name">
                <el-tag type="success">
                  {{ tag.name }}
                </el-tag>
                &nbsp;&nbsp;
              </span>
              <el-row>
                <el-col :span="8" :offset="18">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="updateAuthority(tags, 'tags')"
                    >Update</el-button
                  >
                  <el-button type="danger" size="mini" @click="deleteRole()"
                    >Delete Role</el-button
                  >
                </el-col>
              </el-row>
            </el-card>
            <br />
            <el-card class="authority">
              <div style="font-size: 16px; font-weight: 550">
                Auditor Authority:
              </div>
              <br />
              <span v-for="tag in tags1" :key="tag.name">
                <el-tag type="success">
                  {{ tag.name }}
                </el-tag>
                &nbsp;&nbsp;
              </span>
              <el-row>
                <el-col :span="8" :offset="18">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="updateAuthority(tags1, 'tags1')"
                    >Update</el-button
                  >
                  <el-button type="danger" size="mini" @click="deleteRole()"
                    >Delete Role</el-button
                  >
                </el-col>
              </el-row>
            </el-card>
            <br />
            <el-card class="authority">
              <div style="font-size: 16px; font-weight: 550">
                Administrator Authority:
              </div>
              <br />
              <span v-for="tag in tags2" :key="tag.name">
                <el-tag type="success">
                  {{ tag.name }}
                </el-tag>
                &nbsp;&nbsp;
              </span>
              <el-row>
                <el-col :span="8" :offset="18">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="updateAuthority(tags2, 'tags2')"
                    >Update</el-button
                  >
                  <el-button type="danger" size="mini" @click="deleteRole()"
                    >Delete Role</el-button
                  >
                </el-col>
              </el-row>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <el-dialog
        title="Update Authority"
        :visible.sync="dialogVisible"
        class="dialogStyle"
        width="650px"
      >
        <div>
          <el-transfer
            v-model="value"
            :data="data"
            :titles="['All Authority', 'Given Authority']"
          ></el-transfer>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="updateDialog()">confirm</el-button>
          <el-button @click="dialogVisible = false">cancel</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      createNew: {
        role: "",
        authority: [],
      },
      transferName: "",
      data: [
        { key: 1, label: "结论分析" },
        { key: 2, label: "问卷分析" },
        { key: 3, label: "问卷库" },
        { key: 4, label: "问卷审核" },
        { key: 5, label: "个人问卷" },
        { key: 6, label: "新建问卷" },
        { key: 7, label: "用户管理" },
        { key: 8, label: "数据字典" },
        { key: 9, label: "角色管理" },
        { key: 10, label: "查看问卷" },
        { key: 11, label: "角色信息" },
        { key: 12, label: "个人信息" },
      ],
      value: [],
      dialogVisible: false,
      tags: [
        { id: 5, name: "个人问卷" },
        { id: 6, name: "新建问卷" },
        { id: 10, name: "查看问卷" },
        { id: 12, name: "个人信息" },
      ],
      tags1: [
        { id: 5, name: "个人问卷" },
        { id: 6, name: "新建问卷" },
        { id: 10, name: "查看问卷" },
        { id: 12, name: "个人信息" },
        { id: 4, name: "问卷审核" },
      ],
      tags2: [
        { id: 5, name: "个人问卷" },
        { id: 6, name: "新建问卷" },
        { id: 10, name: "查看问卷" },
        { id: 12, name: "个人信息" },
        { id: 4, name: "问卷审核" },
        { id: 1, name: "结论分析" },
        { id: 2, name: "问卷分析" },
        { id: 3, name: "问卷库" },
        { id: 7, name: "用户管理" },
        { id: 8, name: "数据字典" },
        { id: 11, name: "角色信息" },
        { id: 9, name: "角色管理" },
      ],
      authority: [
        {
          number: 1,
          value: "结论分析",
          code: "resultAnalysis",
          description: "/dataAnalysis/resultAnalysis",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 2,
          value: "问卷分析",
          code: "questionnaireAnalysis",
          description: "/dataAnalysis/questionnaireAnalysis",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 3,
          value: "问卷库",
          code: "questionnaireDatabase",
          description: "/questionnaireManagement/questionnaireDatabase",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 4,
          value: "问卷审核",
          code: "questionnaireReview",
          description: "/questionnaireManagement/questionnaireReview",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 5,
          value: "个人问卷",
          code: "personalQuestionnaires",
          description: "/questionnaireManagement/personalQuestionnaires",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 6,
          value: "新建问卷",
          code: "newQuestionnaire",
          description: "/questionnaireManagement/newQuestionnaire",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 7,
          value: "用户管理",
          code: "userManagement",
          description: "/systemManagement/userManagement",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 8,
          value: "数据字典",
          code: "dataDictionary",
          description: "/systemManagement/dataDictionary",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 9,
          value: "角色管理",
          code: "roleManagement",
          description: "/systemManagement/roleManagement",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 10,
          value: "查看问卷",
          code: "questionnaireDetail",
          description: "/questionnaireManagement/questionnaireDetail",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 11,
          value: "角色信息",
          code: "userDetail",
          description: "/systemManagement/userDetail",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
      ],
    };
  },
  watch: {},
  methods: {
    updateAuthority(value, name) {
      this.transferName = name;
      this.value = [];
      //console.log(value);
      for (let i = 0; i < value.length; i++) {
        this.value.push(value[i].id);
      }
      this.dialogVisible = true;
    },
    updateDialog() {
      this.$message({
        type: "success",
        message: "修改成功!",
      });
      if (this.transferName == "tags") {
        this.tags = [];
        for (let i = 0; i < this.value.length; i++) {
          this.tags.push({
            id: this.value[i],
            name: this.data[this.value[i] - 1].label,
          });
        }
      } else if (this.transferName == "tags1") {
        this.tags1 = [];
        for (let i = 0; i < this.value.length; i++) {
          this.tags1.push({
            id: this.value[i],
            name: this.data[this.value[i] - 1].label,
          });
        }
      } else if (this.transferName == "tags2") {
        this.tags2 = [];
        for (let i = 0; i < this.value.length; i++) {
          this.tags2.push({
            id: this.value[i],
            name: this.data[this.value[i] - 1].label,
          });
        }
      }
      this.dialogVisible = false;
    },
    deleteRole() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    addForm(formName) {
      //搜索表单信息
      console.log(formName);
    },
  },
};
</script>

<style scoped lang="scss">
.box-card {
  width: 90%;
  background: rgba(148, 185, 228, 0.062);
  border-radius: 8px;
  margin: auto;
}

.card-header {
  color: #080808;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-card-title {
  font-size: 16px;
  font-weight: 600;
}

.el-card /deep/.el-card__header {
  background-color: #64bbe742;
  padding: 6px;
}
.tableManagement.el-col {
  border: 22px solid transparent;
}
.authority {
  background: #64bbe742;
  border-radius: 8px;
}
</style>